I feel this current solution is quite elegant it could be limiting and something like a media query feels more appropriate e.g.

@media (scroll-top: 10px) {
.sticky {
postition: fixed;
background: red;
}
}

Where scroll-top (or scroll-left or perhaps scroll-start with consideration for ltr/rtl layouts) is equivalent to the offsetTop value in javascript. This gives you greater ability to alter the elements look and feel, sticky positioning be one use case. This media query is way more powerful and useful.

I love this syntax!
Just imagine the ease of creating sticky menus :)
This syntax in my opinion is way much better cause it will allow us to take more control over the element when it's position change to sticky ... like showing or hiding certain child elements, controlling the width, changing the font size ...
+ Control over sticky AND other media options like screen width
This is revolutionary ... seriously!

In this case and with the proposal I thought this might be an issue if a layout changed i.e. a box above the sticky item is resized. You could get around this with layered classes added in and out but you are still left with a fixed number to continuously muck about with. I would rather propose a method using selectors where you can choose the top of a particular element and change the page features according to when that comes into view i.e.

@media (scroll-top: .sticky) {
.sticky {
position: fixed;
background: red;
}
}

Just an FYI, there's a typo, you might wanna fix "position"

This is cool, but still think (even though Ted dismisses the idea on the mailing list) there should be some kind of event for when an element is sticky, maybe some sort of :active or :sticky psuedo class or something...

See @Ryan Seddon solution below. It's more elegant

hh

This could be accomplished with mixins in LESS. It wouldn't have a pseudo class but you might be able change the state in CSS other than adding a class with query then styling. This is just off the top of my head so I'm not 100% on that.

What do you mean by "This could be accomplished with mixins in LESS."? Less compiles to CSS, so anything possible with LESS / SCSS is possible with CSS. Do you wish to expound?

What I was trying to say is it might be easy to use LESS to create an event when sticky. I wasn't saying CSS couldn't do it because obviously if LESS can CSS can, however it might be easier to write the conditional in LESS rather try to figure out what that would compile down to in CSS. I did say I wasn't 100% sure on that so I'm not sure why I have a bunch of down votes. I've not actually sat down and tried it.

bro do you even less?

new things are coming and coming, this is endless...

how fantastic :)

Yes; If you don't read daily you're out of industry!
I <3 the web ... We are the web <3

This is cool, but still think (even though Ted dismisses the idea on the mailing list) there should be some kind of event for when an element is sticky, maybe some sort of :active or :sticky psuedo class or something...

Hi. Could you correctly attribute the parts of this blog post that are quoted from my www-style email? As currently written, this feels a bit plagiarize-y.

No problem. Gave you a shout out :)

Wouldn't you have a similiar effect if something like min-top existed? WIth width you specify all kind of stuff, but it won't get lower than min-width. In the same way, by specifying min-top:0; the position of the element can move around when needed, but would never have a top lower than 0 (being scrolled out of the page)

I like the idea, especially for consistency. Although top/left/bottom/right don't work without position being set to something other than relative :\ I think you'd still need another property.

That is brilliant! We should do this.

just when I figured out how to do this using javascript...

Handy feature for Websites, thanks Eric.

This feels like it has a few shortcomings. For instance, why is this limited to viewports? A lot of times I might have an overflow box in which I want to make an element sticky when it starts to scroll outside of it, but it seems like this only switches from position: relative to position: fixed, and in the case of an overflow:auto box it would need to switch from position: relative to position: absolute.

The other thing is that when it transitions from one to the other, I might want to top, left, bottom, right values to change. That is, I might want it to have fixed positioning values that differ. So, when it approaches C threshold, it has D position.

More importantly, what about being sticky to BOTH sides? Why not allow something to stick to the bottom when the page is scrolled up far enough, and stick to the top in the same way described here.

Also, what would be really REALLY awesome is if this enabled iOS-like behavior. That, when scrolling, the previous sticky element is "pushed" out of the way (like with list view headers) and smoothly transitions in the next sticky element. That's probably shooting for the moon, but it would be cool.

It isn't limited to viewports in the CSS sense of the word. An overflow box works just as well. I think the draft refers to "flow root" or something for lack of a better defined term (like "overflow root", which is not defined anywhere at all in CSS currently).

It also isn't just switching from relative to fixed. It is more of a hybrid between the two. It takes up space in the layout, unlike "fixed" or "absolute", which do not leave space behind.

The iOS-like behavior is not hard. The sticky thing's position on the page is always limited by the dimensions of its parent, so as long as the two sticky elements are wrapped by different wrappers, then the bottom one will push the top one out (assuming you are using a non-auto "top" value). There is a demo of that here: http://jsfiddle.net/daker/e... (I didn't create this, I got it from a link on the Mozilla Developer Network).

As for the top and bottom working at the same time, that works as you would want, when I tested it in Safari. The spec could be more clear about that, but I think what it means when it says "top wins" is that if there is a conflict (i.e. you could not honor both without changing the height of the sticky item), then the top value takes precedence over the bottom value.

Interesting... Well then, that sounds pretty cool. Thanks.

Don't forget position: sticky; in the .sticky class def. Vendor prefix assignments should be coupled with unprefixed assignments for future proofing.

Please update this documentation because chrome has removed the support from the codebase.

So it looks like with the new Blink engine transition at version 28, Chrome Canary is no longer supporting this. There is no longer an 'Enable Experimental Webkit Features' flag.

Does not work in chrome? look at here.
Chrome : 版本 31.0.1650.57 m

chrome://flags/#enable-experimental-web-platform-features

turn this on, AND restart chrome! AND try again.

best wishes

I wish this had more traction. Doesn't work in Chrome or Canary for me :-/

Currently, I'm on Chrome 24 on Ubuntu and demo page says my browser does not support position: sticky!!

Your demo isn't working in 25.0.1336.0 canary

What platform? I just tried 25.0.1336.0 Mac and it worked fine.

What about table rows and columns? I guess that it will be possible to stick the table header. But what about table first column?

"Folks tend to do too much in the and wonder why their UI is janky." Huh?

"The achieve the above of effect, sites setup scroll event listeners in JS." - might want to do some proofreading :)

Fixed. Thanks.

Love this! It needs to make its way into the spec though.

Hooray!

Hello,
I tried the JavaScript solution for this but couldn't get it to work on IE 9. I tried the following as well but it didn't work either.
function onScroll(e) {
if (sticky.classList){
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
sticky.classList.remove('fixed');
}
else{
window.scrollY >= origOffsetY ? sticky.className = "fixed sticky" :
sticky.className = "sticky";
}
}
Just want to know what I am missing and learn something more than jQuery addClass/removeClass!
Thanks.

Only sticky on the viewport? Then it is USELESS!

I want a combobox dropdown to have sticky section headers. I want all kinds of things sticky within scrollable elements WITHIN my page!

It is not only sticky on the main viewport. It is sticky to any scrolling box.

Whatever happened to sticky? This article is 3 years old and still sticky is behind a flag in Chrome. What is the deal-io?

nice tutorial

So... what happened with this? :/

"if both left and right are specified, left wins" does this reverse in rtl?

Yes. By the way, whether or not one "wins" is only relevant when there is a conflict that prevents them both from working (due to the size of the element, generally).

now it not work, because???
on chrome 31

The demo for sticky positioning is not working for me as of October 2nd 2013. It was working yesterday but today I can't find the flag for experimental webkit features -> http://stackoverflow.com/qu..., which previously made the demo work.

I ask because I am using this feature on a web app I'm developing. Does someone know where I can find more info about changes like these the Google team makes for Chrome?

The flag changed to "experimental web platform features" a while back.